<template>
	<view class="warp">
		<uni-nav-bar background-color="#fff"
		 color="#232323" :border="false" :fixed="true"
		  @clickLeft="left"  left-icon="left" 
		   leftWidth="50rpx" rightWidth="10rpx" 
		   :statusBar="true"  
		   >
		   <view class="title_box">
		 	 <view class="left">
				<view class="left_text">
					获取 / 消耗
				</view>
			</view>
		 	<view class="right" @click="torule">
				<uni-icons color="#797979" fontFamily="CustomFont" :size="26">{{'\ue669'}}</uni-icons>
		 	</view>
		   </view>
		</uni-nav-bar>
		<view class="star_number">
			<view class="number">
				<uni-icons color="#fccf3e" type="star-filled" size="30"></uni-icons>
				<span style="font-size: 54rpx; padding-left: 10rpx;">{{starnumber}}</span>
			</view>
		</view>
		<view class="cont_box">
			<view class="tab_list">
				<view @click="changetab(index)" :class="tabIndex==index?'active':'item'" v-for="(item,index) in tabtitlelist" :key="index">
					<view class="">
						{{item.name}}
					</view>
					<view class="b_line">
						
					</view>
				</view>
			</view>
		</view>
		<swiper 
		:current="tabIndex"
		duration="300"
		class="swiper_box"
		@change="changsw"
		>
			<swiper-item v-for="(item,index) in 3" :key="index">
					<scroll-view  scroll-y class="list-scroll-content">
				     <template>
				     	<view class="tab_cont_box">
				     		 <view class="signlist"v-if="index==1 || index==0">
				     		 	<view class="item" v-for="(item,idx) in starrecord" :key="idx">
				     		 		<view class="left">
				     		 			<view class="icon">
				     		 				<uni-icons color="#fccf3e" type="star-filled" size="32"></uni-icons>
				     		 			</view>
				     		 					<view class="cont_text">
				     		 						<view class="top">
				     		 							测测签到
				     		 						</view>
				     		 						<view class="bottom">
				     		 							{{item.signInDate}}
				     		 						</view>
				     		 					</view>
				     		 		             </view>
				     		 				<view class="right">
				     		 					<uni-icons color="#5ec3f5" type="plusempty" size="16"></uni-icons>
				     		                     <span style="font-size: 38rpx; color: #5ec3f5;">1</span>
				     		 				</view>
				     		 	</view>
				     		 </view>
							 <view class="warn_text" v-if="starrecord.length==0">
							 	暂无记录
							 </view>
				     		<view class="warn_text" v-if="index==2">
				     			暂无消耗记录
				     		</view>
				     	</view>
				     </template>
			
				</scroll-view>
			</swiper-item>
			
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabtitlelist:[{name:'全部'},{name:'已获取'},{name:'已消耗'}],
				tabIndex:0,
				starnumber:0,
				starrecord:[],//获取记录
				queryform:{
					pageSize:10,
					current:1
				},
				total:0
			};
		},
		onLoad() {
			this.getsignnumber()
			this.getstaerecord()
		},
		// 下拉刷新
		onPullDownRefresh(){
			 this.getstaerecord()
			 this.getsignnumber()
			setTimeout(()=>{
				  uni.stopPullDownRefresh()
			},2000)
		},
		methods:{
			// 获取记录
			getstaerecord(){
				this.$request({
					url:'v3/sign/front/list',
					method:'GET',
					data:this.queryform
				}).then(res=>{
					if(res.state==200){
						this.starrecord=res.data.list
						this.total=res.data.pagination.total
					}
				})
			},
			// 滚动到底部数据加载
			onbottomfn(){
				 if(this.queryform.pageSize*this.queryform.current>this.total){
				 	 
				 	uni.showToast({
				 		title:"数据加载完毕",
				 		icon:'none'
				 	})
				 }else{
				 	this.queryform.current++
				 	this.$request({
				 		url:'v3/sign/front/list',
				 		method:'GET',
				 		data:this.queryform
				 	}).then(res=>{
				 		this.starrecord.push(...res.data.list)
				 		
				 	})
				 }
			},
			// 获取小星星当前数量
			getsignnumber(){
			 
					this.$request({
						url:'v3/sign/front/detail',
						method:'GET'
					}).then(res=>{
						if(res.state==200){
							this.starnumber=res.data.integral
						}
					})
				
				
			},
			torule(){
			uni.navigateTo({
				url:"/pages/moreModule/starrule/starrule"
			})
			},
			changetab(idx){
				this.tabIndex=idx
			},
			changsw(e){
				this.tabIndex=e.detail.current
				
			},
			left(){
				uni.navigateBack({delta:1})
			},
		}
	}
</script>
<style>
	page{
		
		background-color: #f2f2f2;
	}
</style>
<style lang="scss">
.warp{
	.title_box{
		padding: 0 0rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.left{
			display: flex;
			align-items: center;
			.left_text{
				font-size: 30rpx !important;
				margin-right: 10rpx;
				
			}
			.left_icon{
				width: 30rpx;
				height: 30rpx;
				text-align: center;
				line-height: 30rpx;
				border: 2rpx solid #323333;
				border-radius: 50%;
				
			}
			
		}
	}
	.star_number{
		height: 220rpx;
		background-color: #fff;
		position: relative;
		.number{
			position: absolute;
			bottom: 80rpx;
			width: 100%;
			text-align: center;
			 
			 
		}
	}
	.cont_box{
		margin-top: 20rpx;
		padding: 20rpx;
		background-color: #fff;
		.tab_list{
			padding: 10rpx 20rpx;
			display: flex;
			justify-content: flex-start;
			.item{
				color: #7c7e7e;
				font-size: 28rpx;
				margin-right: 30rpx;
			}
			.active{
				color: #232323;
				font-size: 30rpx;
				 margin-right: 30rpx;
				.b_line{
					margin-top: 6rpx;
					width: 100%;
					height: 6rpx;
					background-color: #73ddf9;
					border-radius: 3rpx;
				}
			}
		}
	}
	.swiper_box{
		  height: calc(100vh - 220px);
		  background-color: #fff;
	}
	.list-scroll-content{
		height: 100%;
	}
	.tab_cont_box{
		padding: 10rpx 30rpx;
		text-align: center;
		// background-color: red;
		// height: 100vh;
		.warn_text{
			text-align: center;
			font-size: 30rpx;
			padding: 100rpx;
		}
		.signlist{
		.item{
			display: flex;
			justify-content: space-between;
			padding: 20rpx 10rpx;
			align-items: center;
			border-bottom: 2rpx solid #cecece;
		    .left{
				display: flex;
				align-items: center;
				.cont_text{
					margin-left: 16rpx;
					text-align: left;
					.top{
						font-size: 28rpx;
						color: #323333;
					}
					.bottom{
						font-size: 24rpx;
						color: #bababa;
						padding-top: 10rpx;
					}
				}
			}
			.right{
				display: flex;
				align-items: center;
			}
		}
	}
	}
}
</style>
